<template>
  <div id="category">
    <headercpn>
      <template #left>
        <img src="../../../../static/images/tabbar/back.png" @click="back" />
      </template>
      <template #center>
        <input type="text" id="searchInput" ref="input" @keyup.13="submit" />
        <img
          src="../../../../static/images/tabbar/search.png"
          class="search_icon"
        />
      </template>
      <template #right>
        <button id="searchbtn" @click="searchbtn">搜索</button>
      </template>
    </headercpn>
    <div class="container">
      <div class="left">
        <sidebar :sidebarmsg="sidebarMsg"></sidebar>
      </div>
      <div class="right" ref="rightele">
        <goodslist :goodsinfo="goodsInfo"></goodslist>
      </div>
    </div>
  </div>
</template>

<script>
import headercpn from "@/components/header/header";
import sidebar from "./sidebar";
import goodslist from "./goodslist";
export default {
  components: {
    headercpn,
    sidebar,
    goodslist,
  },
  data() {
    return {
      sidebarMsg: [
        "下装",
        "上装",
        "女装",
        "洗护",
        "水果",
        "鞋包",
        "内衣",
        "男装",
        "运动",
        "母婴",
        "美妆",
        "数码",
        "电器",
        "百货",
        "家纺",
        "家装",
      ],
      goodsInfo: [
        {
          title: "下装",
          goods: [
            {
              name: "牛仔裤",
              imgUrl: "../../../../static/images/category/homeclass02.png",
            },
            {
              name: "休闲裤",
              imgUrl: "../../../../static/images/category/homeclass03.png",
            },
            {
              name: "西裤",
              imgUrl: "../../../../static/images/category/homeclass04.png",
            },
            {
              name: "紧身裤",
              imgUrl: "../../../../static/images/category/homeclass05.png",
            },
            {
              name: "运动裤",
              imgUrl: "../../../../static/images/category/homeclass06.png",
            },
            {
              name: "短裤男",
              imgUrl: "../../../../static/images/category/homeclass33.png",
            },
          ],
        },
        {
          title: "上装",
          goods: [
            {
              name: "短袖",
              imgUrl: "../../../../static/images/category/homeclass07.png",
            },
            {
              name: "POLO衫",
              imgUrl: "../../../../static/images/category/homeclass08.png",
            },
            {
              name: "马甲",
              imgUrl: "../../../../static/images/category/homeclass09.png",
            },
            {
              name: "男款卫衣",
              imgUrl: "../../../../static/images/category/homeclass10.png",
            },
            {
              name: "针织衫",
              imgUrl: "../../../../static/images/category/homeclass11.png",
            },
            {
              name: "休闲男装",
              imgUrl: "../../../../static/images/category/homeclass12.png",
            },
          ],
        },

        {
          title: "女装",
          goods: [
            {
              name: "裤子",
              imgUrl: "../../../../static/images/profile/my06.png",
            },
            {
              name: "上衣",
              imgUrl: "../../../../static/images/profile/my07.png",
            },
            {
              name: "牛仔裤",
              imgUrl: "../../../../static/images/profile/my27.png",
            },
            {
              name: "长裤",
              imgUrl: "../../../../static/images/profile/my28.png",
            },
            {
              name: "长袖",
              imgUrl: "../../../../static/images/profile/my04.png",
            },
            {
              name: "下装",
              imgUrl: "../../../../static/images/profile/my05.png",
            },
          ],
        },
        {
          title: "洗护",
          goods: [
            {
              name: "LOREAL",
              imgUrl: "../../../../static/images/home/home14.png",
            },
            {
              name: "清扬",
              imgUrl: "../../../../static/images/home/home15.png",
            },
            {
              name: "MAGEC",
              imgUrl: "../../../../static/images/home/home16.png",
            },
            {
              name: "LUX",
              imgUrl: "../../../../static/images/home/home17.png",
            },
            {
              name: "氨基酸洗发水",
              imgUrl: "../../../../static/images/home/home18.png",
            },
            {
              name: "LOREAL",
              imgUrl: "../../../../static/images/home/home19.png",
            },
          ],
        },
        {
          title: "新鲜水果",
          goods: [
            {
              name: "草莓",
              imgUrl: "../../../../static/images/category/icon1.png",
            },
            {
              name: "哈密瓜",
              imgUrl: "../../../../static/images/category/icon2.png",
            },
            {
              name: "橘子",
              imgUrl: "../../../../static/images/category/icon3.png",
            },
            {
              name: "榴莲",
              imgUrl: "../../../../static/images/category/icon4.png",
            },
            {
              name: "芒果",
              imgUrl: "../../../../static/images/category/icon5.png",
            },
            {
              name: "桃子",
              imgUrl: "../../../../static/images/category/icon6.png",
            },
            {
              name: "荔枝",
              imgUrl: "../../../../static/images/category/icon7.png",
            },
            {
              name: "火龙果",
              imgUrl: "../../../../static/images/category/icon8.png",
            },
            {
              name: "哈密瓜",
              imgUrl: "../../../../static/images/category/icon9.png",
            },
            {
              name: "百香果",
              imgUrl: "../../../../static/images/category/icon10.png",
            },
            {
              name: "柠檬",
              imgUrl: "../../../../static/images/category/icon11.png",
            },
            {
              name: "香蕉",
              imgUrl: "../../../../static/images/category/icon12.png",
            },
            {
              name: "苹果",
              imgUrl: "../../../../static/images/category/icon13.png",
            },
            {
              name: "梨子",
              imgUrl: "../../../../static/images/category/icon14.png",
            },
            {
              name: "樱桃",
              imgUrl: "../../../../static/images/category/icon15.png",
            },
          ],
        },
      ],
      inputvalue: "1",
    };
  },
  methods: {
    // 页面后退
    back() {
      this.$router.go(-1);
    },
    // 回车的时候触发
    submit() {
      this.searchbtn();
    },
    searchbtn() {
      // 将搜索框的值存储到仓库
      if (this.$refs["input"].value != "") {
        this.$store.commit("getKeyWord", this.$refs["input"].value);
      }
    },
  },
};
</script>

<style lang="less" scoped>
#category {
  background-color: #f8f8f8;
  .title {
    img {
      width: 41px;
      height: 46px;
    }
  }
  .container {
    margin-top: 30px;
    display: flex;
    .right {
      margin-left: 237px;
    }
  }
}
</style>